<template>
   
       
        <div class="item-p">
            <chart
            :options="bar"
            :init-options="initOptions"
            ref="bar"
            theme="ovilia-green"
            autoresize
            />
        </div>
       
  
</template>
<script>
import ECharts from '@/components/echarts/ECharts.vue'
import 'echarts/lib/chart/line'

import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'



export default {
    components: {
        chart: ECharts
    },
    props:{
        //[{name:"推荐量",color:"#34243",value:123},
	//{name:"阅读量",color:"#34243",value:123},
	//{name:"转发量",color:"#34243",value:123},
	//{name:"收藏量",color:"#34243",value:123}
	//]
        data: {
            type:[Array, Object],
            default: {}
        },
        title: {
            type:String,
            default:''
        }
    },
    watch:{
        data(newVal,oldVue){
           this.init()
        }
    },
    data(){
        return {
          
            bar:{
                // title: {
                //     text: this.title,
                //     x: 'center',
                //     textStyle:{
                //         color: '#71e3fe',
                //         fontSize: 16
                //     },
                //     top:10
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: '{c0}',
                    backgroundColor: 'none',
                    textStyle: {
                        color: '#000'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '10%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color:'#666666'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: '#999'
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color:'#666666'
                            } 
                        }
                        
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color:'#666666'
                            }
                        },
                        axisLabel: {
                            show: false,
                            color: '#666666',
                            fontSize: '14'
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color:'#666666'
                            } 
                        },
                        splitLine: {
                            lineStyle: {
                                color:'#ECECEC'
                            } 
                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        symbolSize: 6,
                        data: [],
                        lineStyle: {
                            color: '#128FEF'
                        },
                        itemStyle: {
                            borderColor: '#90CBF7',
                            borderWidth: '2'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#128FEF' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
            },
            
            initOptions: {
                renderer: 'canvas'
            }
        }
    },
    methods: {
        init() {
           
            var list = []
            var xAxisData = []
            for (var item of this.data) {
                xAxisData.push(item.name)
                list.push(item.value)
            }
            this.bar.series[0].data = list   
            this.bar.xAxis[0].data = xAxisData
        }
    },
    mounted () {
        this.init()
    }
}
</script>
<style scoped>
.item-p{
    width: 100%;
    height: 100%;
}
</style>